<template>
  <div class="bg-box"> <!-- 仅本页背景 -->
    <!-- 1. 页头 -->
    <div style="display: flex; align-items: center; gap: 6px;">
      <span style="font-size: 25px; font-weight: 100;">User Display</span>
      <i class="el-icon-user-solid" style="font-size: 25px; color: whitesmoke;"></i>
    </div>
    <el-divider style="margin: 8px 0;color: black;"></el-divider>

    <!-- 2. 走马灯卡片 -->
    <el-carousel :interval="4000" type="card" height="260px">
      <el-carousel-item v-for="(user, idx) in userList" :key="idx">
        <el-card class="box-card">
          <template slot="header">
            <div style="display: flex; align-items: center; justify-content: space-between;">
              <span>User message - {{ idx + 1 }}</span>
              <i class="el-icon-question" style="color: #909399; font-size: 16px;"></i>
            </div>
          </template>

          <el-form label-width="80px" size="mini">
            <el-form-item label="User">{{ user.username }}</el-form-item>
            <el-form-item label="Name">{{ user.realname }}</el-form-item>
            <el-form-item label="Phone">{{ user.telephone }}</el-form-item>
            <el-form-item label="Post">{{ user.roleName }}</el-form-item>
          </el-form>
        </el-card>
      </el-carousel-item>

      <!-- 无数据时显示一张空卡片 -->
      <el-carousel-item v-if="userList.length === 0">
        <div style="text-align: center; line-height: 200px; color: #909399;">
          <i class="el-icon-pear" style="font-size: 48px;"></i><br>
          No user information available
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 手风琴 -->
    <el-collapse v-model="activeName" accordion class="sf-collapse">
      <el-collapse-item name="1">
        <template slot="title">
          Consistency <i class="el-icon-camera-solid" style="margin-left:6px;"></i>
        </template>
        <div>"We don’t just ship products, we ship impact." ---Microsoft</div>
      </el-collapse-item>

      <el-collapse-item name="2">
        <template slot="title">
          Feedback <i class="el-icon-camera-solid" style="margin-left:6px;"></i>
        </template>
        <div>"Focus on the user and all else will follow." ---Google</div>
      </el-collapse-item>

      <el-collapse-item name="3">
        <template slot="title">
          Efficiency <i class="el-icon-camera-solid" style="margin-left:6px;"></i>
        </template>
        <div>"Be essential. Be innovative. Be yourself." ---IBM</div>
        <div>"Simplicity is the ultimate sophistication." ---Apple</div>
      </el-collapse-item>

      <el-collapse-item name="4">
        <template slot="title">
          Controllability <i class="el-icon-camera-solid" style="margin-left:6px;"></i>
        </template>
        <div>"Don't be encumbered by history—go do something wonderful." ---Intel</div>
      </el-collapse-item>
    </el-collapse>



  </div>
</template>

<script>
// import axios from 'axios'
import { get } from '@/utils/request'

export default {
  name: 'UserCarousel',
  data() {
    return {
      loading: false,
      userList: [], // 最终用于轮播的数组
      activeName: '1'
    }
  },
  created() {
    this.loadUserList()
  },
  methods: {
    /* 拉用户列表（分页） */
    async loadUserList() {
      this.loading = true
      try {
        // 换成分页接口；
        const res = await get(
          '/user/pageQuery?page=1&pageSize=10'
        )
        // 后端如果返回结构不变，直接取 list
        this.userList = res.data?.list || []
      } catch (e) {
        this.$message.error(
          '获取用户信息失败：' + (e.response?.data?.message || e.message)
        )
        this.userList = []
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg-box {
  min-height: 100vh;
  background: #dddfe5;
}

/* 轮播卡片统一风格 */
.box-card {
  margin: 12px;
  height: calc(100% - 24px);
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 paleturquoise;
}

.box-card {
  background: rgba(53, 42, 42, 0.25);
  backdrop-filter: blur(10px);
  /* 毛玻璃 */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(249, 249, 249, 0.3);
  border-radius: 16px;
  color: #ffffff;
  box-shadow: 0 8px 32px 0 rgba(246, 225, 247, 0.2); //rgba(31, 38, 135, 0.2)
}

.bg-box {
  min-height: 100vh;
  background: url(~@/assets/wallpaper8.jpg) center/cover no-repeat fixed;
}


.sf-collapse {
  width: 60%;
  /* 缩小宽度 */
  margin: 0 auto;
  /* 居中 */
  border: none;
  /* 去掉默认边框 */

  /* 面板标题栏：透明 + 毛玻璃 */
  ::v-deep .el-collapse-item__header {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: #2d3436;
    font-weight: 500;
    padding-left: 20px;
    margin-bottom: 8px;
    transition: all 0.3s;

    /* 悬浮高亮 */
    &:hover {
      background: rgba(108, 227, 211, 0.4);
      /* 薄荷绿 */
      color: #fff;
    }

    /* 箭头颜色 */
    .el-collapse-item__arrow {
      color: inherit;
    }
  }

  /* 展开内容区：同样透明 */
  ::v-deep .el-collapse-item__wrap {
    background: transparent;
    border: none;
  }

  ::v-deep .el-collapse-item__content {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0 0 15px 15px;
    padding: 16px;
    color: #2d3436;
  }
}
</style>
